<template>
  <view class="index-container">
    <LoginWrap>
      <!-- 轮播 -->
      <view class="banner-content">
        <IndexBanner></IndexBanner>
      </view>
      <!-- 公告 -->
      <view class="notice-content">
        <IndexNoticeBar></IndexNoticeBar>
      </view>
      <!-- 导航 -->
      <view class="nav-content">
        <IndexNav @plateInfo="plateInfo"></IndexNav>
      </view>
      <!-- 应用信息 -->
      <view class="applet-list-container">
        <!-- tabs 导航切换 -->
        <view class="tabs-container">
          <!-- <u-tabs
            ref="uTabs"
            :list="appletTabs.appletTypelist"
            :current="appletTabs.currentAppletType"
            @change="tabsChange"
            bg-color="#fff"
            active-color="#fff"
            :bold="false"
            :show-bar="false"
            :is-scroll="false"
            :active-item-style="{
              background: '#56d39d',
              borderRadius: '12rpx'
            }"></u-tabs> -->
            <view
              v-for="(item, index) in appletTabs.appletTypelist"
              :key="index"
              class="tab-item"
              :class="{
                'active-item': appletTabs.currentAppletType == index
              }"
              @click="tabsChange(index)">
              <image
                v-if="item.appletType === 'mp-toutiao'"
                src="@/static/icon/dy2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <image
                v-else-if="item.appletType === 'mp-kuaishou'"
                src="@/static/icon/ks2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <image
                v-if="item.appletType === 'mp-weixin'"
                src="@/static/icon/weixin2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <image
                v-if="item.appletType === 'mp-qq'"
                src="@/static/icon/qq2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <text>{{ item.name }}</text>
            </view>
        </view>
        <!-- 内容卡片 -->
        <Guide :applet-info="activeAppletInfo"></Guide>
      </view>
      <!-- 课程二维码 -->
      <!-- <image
        class="class-icon"
        src="@/static/image/class.png"
        mode="scaleToFill"
        @click="classShow = true"
      /> -->
    </LoginWrap>
    <!-- 课程二维码 -->
    <u-popup v-model="classShow" border-radius="16" mode="center">
			<view class="ks-model-container">
        <view class="model-content">
          <image
            :src="plateInfoData.tutor_wechat_qrcode"
            mode="scaleToFill"
            class="wechat-qrcode"
          />
        </view>
        <view class="close-icon" @click="classShow = false">
          <u-icon name="close-circle" color="#fff" size="58"></u-icon>
        </view>
      </view>
		</u-popup>
  </view>
</template>

<script>
  import LoginWrap from '@/components/loginWrap/loginWrap.vue';
  import IndexBanner from '@/components/indexBanner/indexBanner.vue';
  import IndexNoticeBar from '@/components/indexNoticeBar/indexNoticeBar.vue';
  import IndexNav from '@/components/indexNav/indexNav.vue';
  import Guide from '@/components/guide/guide.vue';
  import { allAppGuideletList } from '@/api/artworks';
  import { mapGetters } from 'vuex';
  export default {
    components: {
      IndexBanner,
      IndexNoticeBar,
      IndexNav,
      Guide,
      LoginWrap
    },
    computed: {
      ...mapGetters([
        'userStatistics',
      ])
    },
    data() {
      return {
        activeAppletInfo: null,
        classShow: false,
        appletTabs: {
          currentAppletType: 0,
          appletTypelist: [{
            appletType: 'mp-toutiao',
            name: '抖音',
            id: 1,
            appletList: []
          }, {
            appletType: 'mp-kuaishou',
            name: '快手',
            id: 2,
            appletList: []
          }, {
            appletType: 'mp-weixin',
            name: '微信',
            id: 3,
            appletList: []
          }],
        },
        swiper: {
          swiperCurrent: 0
        },
        plateInfoData: {}
      }
    },
    onLoad() {
      const currentAppletType = uni.getStorageSync('currentAppletType') || 0;
      this.appletTabs.currentAppletType = currentAppletType;
      this.getAllAppGuideletList();
      console.log(3434,this.$route)
      if(this.$route.query.path=='orderList'){
        uni.navigateTo({ url: "/pages/orderList/order" });
      }
    },
    methods: {

      // 平台
      plateInfo(data) {
        this.plateInfoData = data;
      },

      // 创作者中心获取用户
      getAllAppGuideletList() {
        allAppGuideletList().then(result => {
          if (result && result.data && result.data.length) {
            let list = result.data;
            list.forEach(item => {
              let currentGuide = '';
              if (item && item.appletGuide) {
                const guide = item.appletGuide;
                if (guide.bg_guide && guide.video_guide) {
                  currentGuide = 'videoGuide';
                } else if (guide.copywriter_guide && guide.copywriter_guide.length > 0) {
                  currentGuide = 'copywriterGuide';
                } else if (guide.bg_guide && guide.bg_guide.length > 0) {
                  currentGuide = 'bgGuide';
                }
              }
              item.currentGuide = item.applet_type !== 'mp-weixin' ? currentGuide : 'selfMountGuide';
              if (item.applet_type === 'mp-weixin') {
                this.appletTabs.appletTypelist[2].appletList.push(item);
              } else if (item.applet_type === 'mp-qq') {
                this.appletTabs.appletTypelist[3].appletList.push(item);
              } else if (item.applet_type === 'mp-kuaishou') {
                this.appletTabs.appletTypelist[1].appletList.push(item);
              } else if (item.applet_type === 'mp-toutiao') {
                this.appletTabs.appletTypelist[0].appletList.push(item);
              }
            });
            this.activeAppletInfo = this.appletTabs.appletTypelist[this.appletTabs.currentAppletType].appletList;
          }
        })
      },

      // tabs通知swiper切换
			tabsChange(index) {
        uni.setStorageSync('currentAppletType', index);
        this.appletTabs.currentAppletType = index;
        this.activeAppletInfo = this.appletTabs.appletTypelist[index].appletList;
			},
      // swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
      // swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
    },
    onShareAppMessage() {},
  }
</script>

<style lang="scss" scoped>

  .index-container ::v-deep .u-mode-center-box{
    background-color: transparent;
  }

  page{
    background-color: #f8f8f8;
  }
  .index-container{
    padding: 32rpx 0;
    width: 100%;

    .banner-content{
      margin-bottom: 32rpx;
      padding: 0 32rpx;
    }

    .notice-content{
      margin-bottom: 32rpx;
      padding: 0 32rpx;
    }

    .nav-content{
      margin-bottom: 48rpx;
      padding: 0 32rpx;
    }

    .tabs-container{
      border: 2rpx solid #d5dcf0;
      background: #fff;
      margin: 0 32rpx;
      border-radius: 16rpx;
      overflow: hidden;
      display: flex;

      .tab-item{
        flex: 1;
        height: 68rpx;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
      }

      .applet-icon{
        width: 26rpx;
        height: 26rpx;
        margin-right: 6rpx;
      }

      .active-item{
        background-color: $uni-color-primary;
        color: #fff;
      }
    }

    .applet-container{
      padding: 32rpx;
    }

    .class-icon{
      width: 120rpx;
      height: 120rpx;
      position: fixed;
      right: 24rpx;
      bottom: 200rpx;
      z-index: 99;
    }
  }

  .ks-model-container{
    width: 588rpx;
    border-radius: 16rpx;
    overflow: hidden;
    // background-color: #fff;

    .model-content{
      width: 588rpx;
      height: 1066rpx;
      background-image: url(https://dutuku.img.isvg.cn/2023/07/15/20230715145654-20230715145554.png);
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
    }

    .wechat-qrcode{
      position: absolute;
      width: 320rpx;
      height: 320rpx;
      top: 586rpx;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 8rpx;
    }

    .close-icon{
      padding: 0 24rpx;
      display: flex;
      justify-content: center;
    }
  }
</style>
